<template>
    <div class="yuchartBox" id="yuchartBox">
        
    </div>
    <height-chart ref="chartRef"/>
</template>
<script setup>
import {ref,onMounted,nextTick} from "vue"
import heightChart from '@/components/custom/heightChart.vue'
import {getBudget} from '@/api/plant'

const props = defineProps({
    plantHeaderId:''
})

const chartRef = ref(null)
const budgetData = ref('')

onMounted( async()=>{
    getBudget({plantHeaderId: props.plantHeaderId || null}).then(async res =>{
        budgetData.value = res.data || {}
        await nextTick()
        chartRef.value.createPie('yuchartBox',budgetData.value.yield || 0,budgetData.value.plannedSpending||0,budgetData.value.actualSpending||0)
    })  
})
</script>
<style lang="scss">

.yuchartBox{
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
}

</style>
